<?php
get_header();
global $post;
$author =  get_the_author_meta('nickname',$post->post_author);

$img = get_the_post_thumbnail_url($post->ID,'full');
$galleries = get_field('gallery');
$galleries = explode(',',$galleries);
echo '<style> main .page-banner { background-image: url("'.$img.'");}</style>';
?>
<main class="main_content">
	<link rel="stylesheet" href="<?php echo get_theme_file_uri('assets/css/lightbox.css')?>">
	<?php get_template_part('parts/content/page','banner');?>
	<article class="single-content container py-5">
		<div class="row mb-md-5 mb-3 pb-md-5 ">
			<div class="col-md-6 mb-3 mb-md-0">
				<!--owl-carousel-->
				<div class="detail-gallery">
                    <div class="owl-carousel owl-theme items-carousel" data-slider-id="1">
                        <?php
                            foreach ($galleries as $g) {
                                echo '<div class="item"><img src="'.$g.'" alt=""></div>';
                            }
                        ?>
                    </div>
					<div class="owl-thumbs" data-slider-id="1">
						<?php
						foreach ($galleries as $g) {
							echo '<div class="owl-thumb-item"><img src="'.$g.'" alt=""></div>';
						}
						?>
					</div>
                </div>
				<!--#owl-carousel-->
			</div>
			<div class="col-md-6">
                <ul class="portfolio-info d-flex flex-wrap mb-md-4 mb-3">
                    <li class="mr-4 mb-2"><span class="font-weight-bold"><?php _e('客户：','wdstar');?></span><?php the_field('customer');?></li>
                    <li class="mr-4 mb-2"><span class="font-weight-bold"><?php _e('工期：','wdstar');?></span><?php the_field('period');?></li>
                    <li class="mr-4 mb-2"><span class="font-weight-bold"><?php _e('日期：','wdstar');?></span><?php the_time('Y/m/d');?></li>
                    <li class="mr-4 mb-2"><span class="font-weight-bold"><?php _e('分类：','wdstar');?></span><?php echo get_the_taxonomies('',['template' => '<i class="d-none">%s:</i> %l.'])['genre'];?></li>
                </ul>
				<?php echo $post->post_content;?>
				<div class="single-share my-5 d-flex align-items-baseline">
					<div class="social-share-title font-weight-bold">
						分享到：
					</div>
					<span class="mr-2 border p-1 social-item rounded weibo"><i class="fa fa-weibo fw"></i></span>
					<span class="mr-2 border p-1 social-item rounded wechat" data-toggle="tooltip" data-placement="top" title="微信号:Kyurichiyu"><i class="fa fa-wechat fw"></i></span>
					<span class="mr-2 border p-1 social-item rounded qq"><i class="fa fa-qq fw"></i></span>
					<span class="mr-2 border p-1 social-item rounded linked"><i class="fa fa-linkedin fw"></i></span>
					<span class="mr-2 border p-1 social-item rounded facebook"><i class="fa fa-facebook fw"></i></span>
					<span class="mr-2 border p-1 social-item rounded twitter"><i class="fa fa-twitter fw"></i></span>
				</div>
			</div>
		</div>
		<div class="post-navigation border-bottom pb-3">
			<?php the_post_navigation([
				'prev_text' => __("<span class='mr-1 fa fa-angle-left'></span>上一篇",'wdstar'),
				'next_text' => __("下一篇<span class='ml-1 fa fa-angle-right'></span>",'wdstar'),
			]);?>
		</div>
	</article>
	<section class="post-relate container pb-md-4 mb-5">
		<h3 class="font-weight-normal mb-4"><?php _e('相关文章','wdstar');?></h3>
		<div class="row no-gutters flex-md-nowrap">
			<?php
			query_posts([
				"orderby" => "rand",
				"posts_per_page" =>  4,
				"post_type"     => 'portfolio',
				"post__not_in"  => [$post->ID],
			]);
			while(have_posts()) : the_post();
			?>
            <div class="col-md-3 mb-4 px-0 mx-2"><?php
				get_template_part('parts/post/work','portfolio'); ?>
            </div><?php
			endwhile;wp_reset_query();?>
		</div>
	</section>
</main>
<?php get_footer(); ?>
<script src="<?php echo get_theme_file_uri('assets/js/imagelightbox.js')?>"></script>
<script src="<?php echo get_theme_file_uri('assets/js/owl.carousel.thumb.js')?>"></script>
<script src="<?php echo get_theme_file_uri('assets/js/imagebox.js')?>"></script>
<script>
    $(function () {
        $('.items-carousel').owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            loop: true,
            nav: true,
            dots: false,
            navText: ['<', '>'],
            navElement: 'div',
            thumbs: true,
            thumbsPrerendered: true,
        });
    })
</script>